<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<style>
		body{
			background:url(img/bg.png) repeat-x;
			min-height: 600px;
			position: relative;
		}

		*{font-family:"微软雅黑"; margin:0; padding:0; border:0; font-size:14px;color:white;}
		html,body{height:100%; width:100%;;}

		a{
			text-decoration: none;
			color: rgb(255, 255, 255);
			cursor: pointer;
		}

		.name,.pwd{
			width: 310px;
			height: 44px;
			line-height: 44px;
			padding-left: 15px;
			outline: none;
			border-radius: 20px;
			background-color: #0A3C78;
			border: 1px solid #329BE0;
		}
		.name:hover,.pwd:hover,.name:focus,.pwd:focus{
			background-color: #052b64;
		}

		#login{
			background: #3fb9ff;
			font-size: 18px;
			width: 329px;
			height: 44px;
			outline: none;
			color: white;
			background: -webkit-linear-gradient(#3fb9ff, #099be7, #229de3);
			background: -o-linear-gradient(#3fb9ff, #099be7, #229de3);
			background: -moz-linear-gradient(#3fb9ff, #099be7, #229de3);
			background: linear-gradient(#3fb9ff, #099be7, #229de3);
			border-radius: 20px;
		}
		#login:hover{
			background: -webkit-linear-gradient(#229de3, #099be7,#3fb9ff);
			background: -o-linear-gradient(#229de3, #099be7,#3fb9ff);
			background: -moz-linear-gradient(#229de3, #099be7,#3fb9ff);
			background: linear-gradient(#229de3, #099be7,#3fb9ff);
		}

		#head{
			height: 50px;
			padding-top: 25px;
			margin-left: 14px;
		}
		#middle{
			margin-top: 100px;
			/* height:600px; */

		}
		#footer{
			text-align: center;
			bottom: 15px;
			position: absolute;
			width: 100%;
		}
		#footer a{
			color:black;
		}

		#middle li {
			list-style-type:none;
			margin-top: 15px;
		}

		#children li {
			list-style-type: none;
			height: 42px;
			line-height: 42px;
			border-bottom: 1px double rgb(5, 33, 113);

		}

		#children li a{
			color: rgba(255, 255, 255);
		}

		#cloud{
			background: url(img/cloud.png) repeat;
			width: 100%;
			height: 356px;
			position: absolute;
			bottom: 0px;
			-webkit-animation: cloud 60s linear infinite alternate;
			-moz-animation: clouds 60s linear infinite alternate;
			z-index: -10;

		}

		@-webkit-keyframes cloud {
			0%{background-position:top left}
			100%{background-position:top right}
		}

		@-moz-keyframes clouds {
			0%{background-position:top left}
			100%{background-position:top right}
		}

		#err{
			display:none;
			color:red;
		}
		#sky{
			background: url(img/sky.png) repeat;
			width: 100%;
			heigth: 462px;
			z-index: -20;
			height: 462px;
			position: absolute;
			top: 0px;
		}
	</style>
</head>
<body>
<div id="sky"></div>
<div id="head"></div>
<div id="middle">
	<ul style="text-align: center;">
		<li style="font-size: 48px">OnePass</li>
		<li><input type="password" id="password" name="password" class="pwd"
				   onkeypress="if(event.keyCode==13){login.click();return false;}" placeholder="请输入密码"></li>

		<li><button id="login" name="login" onclick="login();">进入</button></li>
		<li><span id="err" style="display: inline-block;">密码错误</span></li>
	</ul>
</div>
<div id="footer">

	<a>onepass-build-5.0.1 &nbsp &nbsp|&nbsp &nbsp</a>

	<a>Copyright © 2017 ATNOCE.COM  保留所有权利   </a>
</div>
<div id="cloud"></div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script language='javascript' type='text/javascript'>
	$(document).ready(function() {
		init();
		$("#err").hide();
		$("#password").focus();
	});
	function login(){
		var password=$("#password").val();
		if (password.length<1){
			$("#err").html("密码不能为空").show();
			return;
		}
		var jobj=JSON.parse(app.login(password));
		if (jobj.flag){
			window.location='index.html';
		}else{
			$("#err").html(jobj.msg).show();
		}

	}
	function init(){
		$(".name,.pwd,#valid").keyup(function(event){
			if( event.keyCode==13 ){
				$('#login').click();
			}
		});
		$("form").submit( function(event){

			var account = $(".name").val();
			var pwd = $(".pwd").val();
			if(!account ||!pwd) {
				$("#err").css("display","inline-block");
				$("#err").text("请输入用户名或密码");
				return false;
			}
			var code= $("#valid").val().toLocaleLowerCase();
			code = $.trim(code);
			if(code.length<4) {
				$("#err").css("display","inline-block");
				$("#err").text("验证码错误");
				return false;
			}
		});

		$('#changeimg').click(function(){
			$('#verifyCodePic')[0].src='/jcaptcha.jpg?'+Math.random();
			return false;
		});
	}
</script>
</body>
</html>